Repository navigation
fix(metro): compile the native stylesheet from the authored CSS, never its web build - #461
YevheniiKotyrlo wants to merge 1 commit into
Conversation
Device evidence — before / afterUNFIXED — The light-dark() bar is an empty outline. The compiler receives CSS lowered for browsers, where light-dark() is a pair of variables React Native discards. FIXED — The light-dark() bar paints its light arm, red, like the control. The compiler receives light-dark() as authored.
Android 16 emulator (API 36, GLES on the host GPU), 1140×2400 @ 480dpi, both frames from one run. |
3337c2d to
35afc36
Compare
ce06ff9 to
c9ceaa4
Compare
…r its web build The transformer compiled Expo's web build of the stylesheet, which lightningcss had lowered for the project's browserslist: `:dir()` became `:lang()` lists the compiler cannot read, `oklch()` gained a second `:root`, and the native output moved with the browserslist. It now runs the project's PostCSS and Sass, in the order Expo's web transform runs them, and compiles their output. sass becomes a dev dependency, so the tests compile the Sass arm with Dart Sass and the helpers take their types from Expo's declarations. Closes nativewind#453
c9ceaa4 to
5eba16a
Compare
Problem
The Metro transformer compiles the web build of a stylesheet for a device. That build is
@expo/metro-config'stransformCss: PostCSS, Sass, then lightningcss against the project's browserslist, or browserslist'sdefaultswhen the project declares none. So the native compiler receives CSS lowered for browsers. Measured on a Tailwind v4 entry::dir(rtl)becomes:is(:lang(ae), :lang(ar), …)rtl:/ltr:rule is dropped (#453)oklch()becomeslab(), plus a hex-fallback:rootbeside a@supportscopyinlineVariablesinlines none and each colour utility compiles to a runtime lookuptransform-origin: left top 30pxis re-serialised["0%", 30, 0]instead of[0, 0, 30]All of it moves with the browserslist.
Solution
The transformer runs the project's PostCSS and Sass through the modules Expo's web transform calls, in the same order, and compiles their output. No browser build is produced for a native stylesheet.
transformPostCssModuleresolves and caches the project'spostcss.config.*as the web transform does, so a plugin runs for a device exactly when it runs for a browser.@importdependencies, but the transformer already discarded them.compile()'s own lightningcss pass sets no targets and keeps:dir(); it was handed the wrong input.Both helpers are imported from
@expo/metro-config/build/transform-worker/, which is not listed as public API.sassbecomes a dev dependency, so Expo's declarations type the Sass helpers and the tests run Dart Sass.Tests
src/__tests__/metro/native-stylesheet-input.test.tsdrives the realtransformagainst a stand-in for Expo's worker..scssor.sass, then lightningcss againstchrome: 100, which predates:dir(), so the lowering happens for real.postcss.config.jsonnaming@tailwindcss/postcss, a@themecolour inoklch(), andbg-[#00f] rtl:bg-[#f00] bg-brand.rtl:bg-[#f00]keeps itsdircondition while the worker is never asked for a web build, andbg-brandinlines to a literal.skipCached output, and three requests that must reach the worker untouched (a web build, a non-stylesheet module, a stylesheet requested as an asset).src/__tests__/metro/native-stylesheet-plain-project.test.tsis a project with no PostCSS config, in its own file because Expo resolves a project's pipeline once per process. An indented.sassbeside its CSS is compiled by Dart Sass.src/__tests__/metro/native-stylesheet-sass.test.tscompiles a.scsswith Expo's helper and Dart Sass. The project's PostCSS plugin appends a rule whose colour is a Sass variable, so that colour reaching the stylesheet shows Sass compiling PostCSS's output, in Expo's order. Its web build reaches the worker untouched.beforeAll, under one 60 s timeout from the worker stand-in, since the transform can outlast jest's 5 s default.On
main, 4 of the 15 cases fail, each where the bug shows; all pass here. Four mutations each fail their own cases: skipping PostCSS, skipping Sass, handing Sass the authored source, and one Sass syntax for every file.Verification
On Ubuntu with the workflow's steps - build, lint, typecheck,
yarn test,node --test node/__tests__/*.mjs, both library builds, the web export, the unstaged-changes checks and commitlint - everything passes, and the iOS dev build passes with Xcode 27.1, where the workflow pins 26.6.Device evidence, before and after: #461 (comment)
Related
Closes #453. That report places the lowering inside
compile(); it happens one hop earlier.Merge order
#493 lands first. This compiles a native stylesheet without the pass in Expo's CSS worker that drops what lightningcss cannot parse, so on its own a rule such as
@media (foo bar),color: var()or.b > { color: blue }throws incompile()and fails a Metro build thatmainpasses with a warning. With #493 each is dropped with a warning, as onmain.